<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户登录</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/jquery.cookie.js"></script>
	</head>
	<body>
		<div class="container" id="login_out">
			<div class="row">
				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="login">
					<div class="row">
						<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="login_left"><img src="images/login/login_left_logo.png"></div>
						<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="login_right">
							<div id="login_right_title">用户登录</div>
							<input class="user_password" id="telephone" type="text" autocomplete="off" placeholder="请输入您的手机号码">
							<input class="user_password" id="password" type="password" autocomplete="off" placeholder="请输入密码">
							<input class="checkCode" id="phoneCode" type="text" autocomplete="off" placeholder="请输入验证码"><img src="/FVOnline/checkCode/getCode" id="abcd">
							<div><button id="login_submit">登&nbsp;录</button></div>
							<div id="goto_register"><p>没有账号？前往<a href="register.html">注册</a></p></div>
						</div>
					</div>
				</div>
			</div>
		</div>

        <script type="text/javascript">


            $("#abcd").click(function () {
                this.src = "/FVOnline/checkCode/getCode?" +new Date().getTime();
            });


            $("#telephone").blur(function () {

				var telephone_reg = /^1[3-9]\d{9}$/;

				var telephone = $("#telephone").val();

				var flag = telephone_reg.test(telephone);

				if (!flag){
                    $("#telephone").addClass("error_input");
				}

            });

            $("#telephone").focus(function () {

				$("#telephone").removeClass("error_input");

            });

            $("#password").blur(function () {

                var password_reg = /^[A-Za-z\d!"#$%&'()*+,-.<=>?@[\]^_`{|}~]{6,16}$/;

                var password = $("#password").val();

                var flag = password_reg.test(password);

                if (!flag){
                    $("#password").addClass("error_input");
                }

            });

            $("#password").focus(function () {

				$("#password").removeClass("error_input");

            });


            $("#phoneCode").blur(function () {

                var phoneCheckCode_reg = /^([a-zA-Z]{4})$/;

                var phoneCode = $("#phoneCode").val();

                var flag = phoneCheckCode_reg.test(phoneCode);

                if (!flag){
                    $("#phoneCode").addClass("error_input");
                }

            });

            $("#phoneCode").focus(function () {
                $("#phoneCode").removeClass("error_input");
            });


            $("#sendCode").click(function () {
                if (isNormalInput($("#telephone"))) {
                    var telephone = $("#telephone").val();
                    $.get("checkCode/getPhoneCode",{telephone:telephone},function (data) {

					});
                    setSendCodeTime(60);
                }else {
                    if (!$("#telephone").hasClass("error_input")){
                        $("#telephone").addClass("error_input");
                    }
                }
            });

            function setSendCodeTime(time) {
				if (time == 0){
                    $("#sendCode").removeAttr("disabled");
                    $("#sendCode").html("发送验证码");
                    return false;
				}else {
                    $("#sendCode").attr("disabled",true);
                    $("#sendCode").html(time + "S重新发送");
                    time--;
				}
                setTimeout(function() {
                    setSendCodeTime(time);
                },1000);
            }

            function isNormalInput(ipt){
                return ipt.val() != null && ipt.val().length != 0 && !ipt.hasClass("error_input");
			}

            $("#login_submit").click(function () {
                if (isNormalInput($("#telephone")) && isNormalInput($("#password")) && isNormalInput($("#phoneCode"))) {

                    var telephone = $("#telephone").val();
                    var password = $("#password").val();
                    var phoneCode = $("#phoneCode").val();

                    var code = $.cookie("checkcode");

                    if (phoneCode.toLowerCase() == code.toLowerCase()){
                        $.post("user/login",{telephone:telephone,password:password,phoneCode:phoneCode},function (data) {
                            var json = JSON.parse(data);
                            if(json.code.toLowerCase() == "success"){
                                location.href = "index.html";
                            }else if(json.code.toLowerCase() == "error"){
                                if (json.message == "验证码错误"){
                                    $("#phoneCode").addClass("error_input");
                                }else if(json.message == "密码错误"){
                                    $("#password").addClass("error_input");
                                }
                            }else if (json.code.toLowerCase() == "level") {
                                alert("对不起，您的账号被封禁!");
                            }
                        });
					} else {
                        alert("验证码输入错误");
					}

				}else {
                    if (!isNormalInput($("#telephone"))){
                        if (!$("#telephone").hasClass("error_input")){
                            $("#telephone").addClass("error_input");
                        }
                    }
                    if (!isNormalInput($("#password"))){
                        if (!$("#password").hasClass("error_input")){
                            $("#password").addClass("error_input");
                        }
                    }
                    if (!isNormalInput($("#phoneCode"))) {
                        if (!$("#phoneCode").hasClass("error_input")){
                            $("#phoneCode").addClass("error_input");
                        }
                    }
                }

            });
            
        </script>
	</body>
</html>
